<template>
  <div id="BuildMaterialService" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">
    <!-- <div class="title">
      <span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        <van-icon name="arrow-left" />
        返回
      </span>
      建材服务
    </div> -->
    <div style="padding: 4px">
      <van-cell-group>
        <van-field right-icon="search" size="mini" style="background: #EEEEEE;border-radius: 5px;" v-model="value" placeholder="请输入建材关键字" />
      </van-cell-group>
    </div>
    <div class="content">
      <div class="boxser" v-for="item in imagesList" :key="item">
        <div style="line-height:5vh;color:#000;font-size:16px;font-weight: bold;">
          {{item.NAME}}
        </div>
        <div>
          <div style="float:left;">
            <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/26.png" alt=""> {{item.CITYNAME}}
          </div>
          <div style="float:right;" v-show="item.RECORDTIME">
            时间：{{item.RECORDTIME?item.RECORDTIME.split(" ")[0]:''}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetData } from '@/utils/api';
export default {
  data () {
    return {
      showEdition: true,
      value: '',
      imagesList: [
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
        {
          title: '2021年11月建材价格”',
          title1: '惠州市',
          time: '2021-11-20',
          right: '522'
        },
      ]
    }
  },
  watch: {
    value () {
      this.getData()
    }
  },
  mounted () {
    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        "title": "建材服务"
      }).then(res => {
      }).catch(err => {
      })
    }
    this.getData()
  },
  methods: {
    onClickLeft () {
      this.$router.push({
        path: '/ZLJIndex',
      });
    },
    getData: async function () {
      let parameter = {
        "tableid": "0f38bf1fd0bc4cfe8ba659083b721206",
        "currentPage": 1,
        "numPerPage": 30,
        "complexQuery": [
          {
            "name": "TYPE",
            "value": "建材服务"
          }
        ]
      }
      if (this.value) {
        parameter.complexQuery.push({ "name": "NAME", "value": this.value })
      }
      const res = await GetData(parameter)
      this.imagesList = [];
      if (res.data.code == 200) {
        this.imagesList = res.data.data.data.resultList
      }
    },
  }
}
</script>
<style lang="scss">
#BuildMaterialService {
  background: #fff;
  /*font-size: 14px;*/
  height: 100vh;
  .title {
    width: 100%;
    height: 50px;
    // background: #007aff;
    line-height: 50px;
    text-align: center;
    // color: #ffffff;
    /*font-size: 20px;*/
    position: relative;
  }
  .content {
    height: calc(100vh - 100px);
    overflow: auto;
  }
  .boxser {
    clear: both;
    height: 80px;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
}
</style>
<style >
.van-cell {
  padding: 4px 14px !important;
}
</style>
